<template>
  <div class="app-container" v-loading="!showTree">
        <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="80px" size="medium" @submit.native.prevent v-loading="listLoading">
          <div style="display: flex">
            <div style="flex: 2">
              <el-row>
                <el-col :span="8" class="grid-cell">
                  <el-form-item label="服务单号" prop="serviceUid" class=" label-right-align">
                    <el-input v-model="form.serviceUid" type="text" placeholder="服务单号" clearable disabled/>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="grid-cell">
                  <el-form-item label="体检号" prop="checkCode" class=" label-right-align">
                    <el-input v-model="form.checkCode" type="text" placeholder="请输入体检号" clearable>
                    <template #append>
                      <el-button class="el-icon-search" @click="checkCodeSearch"/>
                    </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="grid-cell">
                  <el-form-item label="登记类型" prop="registertype" class=" label-right-align" label-width="100px">
                    <el-select v-model="form.registertype" placeholder="请选择证件类型" disabled>
                      <el-option
                        v-for="dict in dict.type.dime_reigster_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="static-content-item"><el-divider direction="horizontal" /></div>
              <div class="static-content-item"><div>人员信息</div></div>
              <el-row>
                <el-col :span="10" class="grid-cell">
                  <el-form-item label="证件类型" prop="idNoType" class="required label-right-align">
                    <el-select v-model="form.idNoType" placeholder="请选择证件类型">
                    <el-option
                      v-for="dict in dict.type.dime_physical_certificate"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10" class="grid-cell">
                  <el-form-item label="证件号" prop="idNo" class="required label-right-align" label-width="100px">
                    <el-input v-model="form.idNo" type="text" placeholder="请输入证件号" clearable>
                      <template #append>
                        <el-button class="el-icon-search" @click="search"/>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <div style="position: absolute;right: 20px">
                      <div class="block">
                        <el-image
                          style="width: 90px; height: 100px;margin-bottom: 10px"
                          :src='form.headUrl'
                          fit="cover"
                          placeholder='头像'
                        />
                      </div>
<!--                      <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="handlepic">拍照</el-button>-->
                </div>
              </el-row>
              <el-row>
                <el-col :span="6" class="grid-cell">
                  <el-form-item label="姓名" prop="name" class="required label-right-align">
                    <el-input v-model="form.name" type="text" placeholder="请输入姓名" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="grid-cell">
                  <el-form-item label="性别" prop="sex" class="required label-right-align">
                    <el-select v-model="form.sex" placeholder="请选择性别">
                      <el-option
                        v-for="dict in dict.type.sys_user_sex"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="grid-cell">
                  <el-form-item label="年龄" prop="age" class="required label-right-align"><el-input v-model="form.age" type="text" placeholder="请输入年龄" clearable /></el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6" class="grid-cell">
                  <el-form-item label="婚否" prop="marriage" class="label-right-align">
                    <el-select v-model="form.marriage" placeholder="请选择婚否">
                      <el-option
                        v-for="dict in dict.type.dime_physical_marrie"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="grid-cell">
                  <el-form-item label="民族" prop="nation" class="label-right-align">
                    <el-input v-model="form.nation" type="text" placeholder="请输入民族" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="grid-cell">
                  <el-form-item label="国籍" prop="nationality" class="label-right-align">
                    <el-input v-model="form.nationality" type="text" placeholder="请输入国籍" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="grid-cell">
                  <el-form-item label="电话" prop="phone" class="label-right-align">
                    <el-input v-model="form.phone" type="text" placeholder="请输入电话" clearable />
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row>
                <el-col :span="12" class="grid-cell">
                  <el-form-item label="单位" prop="companyName" class="required label-right-align">
                    <el-input v-model="form.companyName" type="text" placeholder="请输入单位" clearable disabled/>
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="grid-cell">
                  <el-form-item label="部门" prop="dept" class="label-right-align"><el-input v-model="form.dept" type="text" placeholder="部门" clearable /></el-form-item>
                </el-col>
                <el-col :span="6" class="grid-cell">
                  <el-form-item label="工种" prop="jobType" class="label-right-align"><el-input v-model="form.jobType" type="text" placeholder="工种" clearable /></el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6" class="grid-cell">
                  <el-form-item label="工号" prop="empno" class="label-right-align"><el-input v-model="form.empno" type="text" placeholder="工号" clearable /></el-form-item>
                </el-col>
                <el-col :span="6" class="grid-cell">
                  <el-form-item label="社保" prop="socialCode" class="label-right-align"><el-input v-model="form.socialCode" type="text" placeholder="社保" clearable /></el-form-item>
                </el-col>
                <el-col :span="12" class="grid-cell">
                  <el-form-item label="住址" prop="address" class="label-right-align">
                    <el-input v-model="form.address" type="text" placeholder="家庭住址" clearable />
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="static-content-item"><el-divider direction="horizontal" /></div>
              <div class="static-content-item"><div>体检信息</div></div>
              <el-row>
                <el-col :span="8" class="grid-cell">
                  <el-form-item label="套餐" prop="packageName" class="required label-right-align">
                    <el-input v-model="form.packageName" type="text" placeholder="套餐" clearable disabled/>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="grid-cell">
                  <el-form-item label="体检类型" prop="checkType" class="required label-right-align" label-width="100px">
                    <el-select v-model="form.checkType" placeholder="请选择体检类型">
                      <el-option
                        v-for="dict in dict.type.dime_physical_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="grid-cell">
                  <el-form-item label="在岗状态" prop="workStatus" class="required label-right-align" label-width="100px">
                    <el-select v-model="form.workStatus" placeholder="请选择在岗状态">
                    <el-option
                      v-for="dict in dict.type.dime_physical_work"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" class="grid-cell">
                  <el-form-item label="危害因素" prop="dimeBaseharmList" class=" label-right-align">
                    <el-tree-select v-if="showTree"
                      ref="treeSelect"
                      v-model="form.dimeBaseharmList"
                      popover-class="test-class-wrap"
                      value-key="id"
                      :select-params="selectParams"
                      :tree-params="treeParams"
                      :filter-node-method="_filterFun"
                      @searchFun="_searchFun"
                      @removeTag="harmfactorChangeRemove"
                      @check="harmfactorChange"
                      @select-clear="clearHarm"
                    />
                  </el-form-item>
                </el-col>
                </el-row>
              <el-row>
                <el-col :span="24" class="grid-cell">
                  <el-form-item label="接触危害" prop="touchHarms" class="label-right-align">
                    <el-input v-model="form.touchHarms" type="text" placeholder="请输入接触危害" clearable />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" class="grid-cell">
                  <el-form-item label="备注" prop="remark" class="label-right-align"><el-input v-model="form.basecompany.remark" type="text" disabled/></el-form-item>
                </el-col>
                <el-col :span="12" class="grid-cell">
                  <el-form-item label="其他备注"  class="label-right-align"><el-input v-model="form.basecompany.remark2" type="text" disabled/></el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" class="grid-cell">
                  <el-form-item label="注意事项"  class="label-right-align"><el-input v-model="form.basecompany.remark3" type="text" disabled/></el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6" class="grid-cell">
                  <el-form-item label="总工龄(年)" prop="workYears" class="label-right-align">
                    <el-input v-model="form.workYears" type="text" placeholder="请输入总工龄(年)" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="grid-cell">
                  <el-form-item label="总工龄(月)" prop="workMonths" class="label-right-align">
                    <el-input v-model="form.workMonths" type="text" placeholder="请输入总工龄(月)" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="grid-cell">
                  <el-form-item label="接害工龄(年)" prop="touchYears" class="label-right-align" label-width="100px">
                    <el-input v-model="form.touchYears" type="text" placeholder="请输入接害工龄(年)" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="grid-cell">
                  <el-form-item label="接害工龄(月)" prop="touchMonths" class="label-right-align" label-width="100px">
                    <el-input v-model="form.touchMonths" type="text" placeholder="请输入接害工龄(月)" clearable />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div style="flex: 1;margin-left: 20px;">
              <div class="static-content-item"><div>体检项目</div></div>
                    <el-table ref="combTable" border stripe :data="form.physicalCombDtos" size="mini" height="650px" :row-style="{height:'40px'}">
                      <el-table-column type="index" label="序号" :width="50" />
                      <el-table-column v-for="col in CombcolumnList" :key="col.prop" :prop="col.prop" :label="col.label" align="center" />
                    </el-table>
            </div>
          </div>
        </el-form>

    <div slot="footer" align="right" style="position: absolute;right: 20px;bottom:50px">
      <el-button v-loading="formLoading" size="medium" type="primary" @click="save">确认</el-button>
    </div>
    <!-- 选择人员 -->
    <el-dialog title="选择人员" :visible.sync="personDialog" width="800px" append-to-body>
      <el-table :data="personList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="体检编号" align="center" prop="checkCode" />
        <el-table-column label="姓名" align="center" prop="name" />
        <el-table-column label="部门" align="center" prop="dept" />
        <el-table-column label="体检类型" align="center" prop="checkType">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.dime_physical_type" :value="scope.row.checkType"/>
          </template>
        </el-table-column>
        <el-table-column label="登记类型" align="center" prop="registertype">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.dime_reigster_type" :value="scope.row.registertype"/>
          </template>
        </el-table-column>
        <el-table-column label="单位名称" align="center" prop="companyName" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="savePerson">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import Pagination from '@/components/Pagination';
import permission from '@/directive/permission/index.js'
import TablecolumnList from '../tablecolumn.js'
import { getRegisterInfo,savePhysical,getRegisterInfoByVid,checkregisterInfoByVid,reRegisterInfo } from '@/api/register/physicalregister.js'
import { getallharmtype } from '@/api/physical/basecompany'
const defaultForm = {
  "address": "",
  "age": "" ,
  "baseCompanyId": "",
  "basePackageId": "",
  "basecompany": {
    "remark": "",
    "remark2": "",
    "remark3": "",
  },
  "basepackage": {
    "worktype":''
  },
  "birthday": "",
  "channel": "",
  "checkCode": "",
  "checkDate": "",
  "checkResult": "",
  "checkType": "",
  "combLack": "",
  "companyName": "",
  "completStatus": "",
  "dept": "",
  "dimeBaseharmList": [],
  "empNo": "",
  "harmfacter": "",
  "headUrl": "",
  "headpicture": "",
  "healthSuggestion": "",
  "id": "",
  "idNo": "",
  "idNoType": "",
  "isValid": 0,
  "jobType": "",
  "lastCheckCode": "",
  "mainCheckDate": "",
  "mainCheckDoctor": "",
  "mainConclusion": "",
  "marriage": "",
  "name": "",
  "nation": "",
  "nationality": "",
  "needAsk": "",
  "packageName": "",
  "params": {},
  "password": "",
  "personType": "",
  "phone": "",
  "physicalCombDtos": [],
  "platformTag": "",
  "reCheckTag": "",
  "registerDate": "",
  "registertype": "",
  "remark": "",
  "reportPrintDate": "",
  "reportPrinter": "",
  "serviceUid": "",
  "sex": "",
  "shopCode": "",
  "soaOrderNo": "",
  "socialCode": "",
  "takeReportType": "",
  "touchHarms": "",
  "touchMonths": 0,
  "touchYears": 0,
  "workMonths": 0,
  "workStatus": "",
  "workYears": 0
}
export default {
  name: 'register',
  dicts: ['dime_physical_type', 'dime_physical_marrie', 'sys_user_sex','dime_physical_certificate','dime_physical_work','dime_reigster_type'],
  components: {},
  directives: {
    permission
  },
  // props: [],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showTree: false,
      registerInfo:{},
      UploadImge:null,
      show: this.visible,
      // name: this.Name,
      previews: {},
      // tree select
      selectParams: {
        clearable: true,
        placeholder: '请选择危害因素',
        multiple: true
      },
      treeParams: {
        clickParent: true,
        filterable: true,
        // 只想要子节点，不需要父节点
        leafOnly: true,
        showCheckbox: true,
        includeHalfChecked: false,
        'check-strictly': false,
        'default-expand-all': true,
        'expand-on-click-node': false,
        data: [],
        props: {
          children: 'harms',
          label: 'hamName',
          rootId: '0',
          disabled: 'disabled',
          parentId: 'pid',
          value: 'id'
        }
      },
      // end treeselect
      columnList: TablecolumnList.columnList,
      CombcolumnList: TablecolumnList.CombcolumnList,
      ItemcolumnList: TablecolumnList.ItemcolumnList,
      list: [],
      rules: {
        idNo: [
          {
            required: true,
            message: '字段值不可为空'
          },
          /*{
            pattern: /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            trigger: ['blur', 'change'],
            message: '身份证验证失败！'
          }*/
        ],
        checkCode: [
          {
            required: true,
            message: '体检号不可为空'
          }
        ],
        name: [
          {
            required: true,
            message: '字段值不可为空'
          }
        ],
        sex: [
          {
            required: true,
            message: '字段值不可为空'
          }
        ],
        age: [
          {
            required: true,
            message: '字段值不可为空'
          },
          {
            pattern: /^\d+(\.\d+)?$/,
            trigger: ['blur', 'change'],
            message: '字段值只能为整数'
          }
        ],
        companyguid: [
          {
            required: true,
            message: '字段值不可为空'
          }
        ],
        solutionguid: [
          {
            required: true,
            message: '字段值不可为空'
          }
        ],
        checkType: [
          {
            required: true,
            message: '字段值不可为空'
          }
        ],
        workStatus: [
          {
            required: true,
            message: '字段值不可为空'
          }
        ],
        workYears: [
          {
            pattern: /^\d+(\.\d+)?$/,
            trigger: ['blur', 'change'],
            message: '字段值只能为整数'
          }
        ],
        workMonths: [
          {
            pattern: /^\d+(\.\d+)?$/,
            trigger: ['blur', 'change'],
            message: '字段值只能为整数'
          }
        ],
        touchYears: [
          {
            pattern: /^\d+(\.\d+)?$/,
            trigger: ['blur', 'change'],
            message: '字段值只能为整数'
          }
        ],
        phone: [{
          pattern: /^[1][3-9][0-9]{9}$/,
          trigger: ['blur', 'change'],
          message: '请正确输入电话'
        }]

      },
      personList:[],
      personDialog:false,
      form: Object.assign({}, defaultForm),
      harmtList:[],
      totalCount: 0,
      listLoading: false,
      formLoading: false,
      page: 1,
      multipleSelection: [],
      isEdit: false,
      nationOptions: [],
      companyguidOptions: [],
      solutionguidOptions: [],
      checktypecodeOptions: [],
      workstateOptions: [],
      jobtypeOptions: [],
      harmfactorsOptions: [],
      // harmtouchOptions: [],
      CombsOptions: [],
      CombDatas: [],
      toData: [],
      SolutionCombs: [],
      BaseCombs: [],
      harmfactorsData: []
    }
  },
  computed: {},
  watch: {
    visible() {
      this.show = this.visible
    }
  },

  created() {
    this.getHarmsList()
  },
  mounted() {

  },
  methods: {
    search(){
      this.listLoading = true
      getRegisterInfo(this.form.idNo).then(response => {
        this.registerInfo = response.data;
        if(this.registerInfo){
          if(this.registerInfo.length==1){
            this.form=this.registerInfo[0]
            this.form.workStatus=this.form.basepackage.worktype
            if(this.form.dimeBaseharmList) {
              this.form.dimeBaseharmList = this.form.dimeBaseharmList.map(item=>{
                return item.id
              })
            }else {
              this.form.dimeBaseharmList=[]
            }
          }else{
            this.personList=this.registerInfo
            this.personDialog=true
          }
        }
      }).finally(()=>{
        this.listLoading = false;
      });
    },
    checkCodeSearch(){
      this.listLoading = true
      getRegisterInfoByVid(this.form.checkCode).then(response => {
        this.registerInfo = response.data;
        if(this.registerInfo){
            this.form=this.registerInfo[0]
          if(this.form.basepackage){
            this.form.workStatus=this.form.basepackage.worktype
          }
            if(this.form.dimeBaseharmList) {
              this.form.dimeBaseharmList = this.form.dimeBaseharmList.map(item=>{
                return item.id
              })
            }else {
              this.form.dimeBaseharmList=[]
            }
        }
      }).finally(()=>{
        this.listLoading = false;
      });
    },
    savePerson(){
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: '未选择',
          type: 'warning'
        })
        return
      }
      if (this.multipleSelection.length != 1) {
        this.$message({
          message: '编辑必须选择单行',
          type: 'warning'
        })
        return
      }
      this.form=this.multipleSelection[0]
      if(this.form.basepackage){
        this.form.workStatus=this.form.basepackage.worktype
      }
      if(this.form.dimeBaseharmList) {
        this.form.dimeBaseharmList = this.form.dimeBaseharmList.map(item=>{
          return item.id
        })
      }
      this.personDialog=false
    },
    getHarmLabel(datas) {
      if(!datas) return []
      let harms = []
      this.harmtList.forEach(item=>{
        if(item.harms) {
          harms.push(...item.harms)
        }
      })
      let labels = datas.map(item=>{
        for(let i = 0; i < harms.length; i++) {
          if(item == harms[i].id) {
            return harms[i]
          }
        }
      })
      return labels
    },
    // Harmfactortree
    _filterFun(value, data, node) {
      if (!value) return true
      return data.hamName.indexOf(value) !== -1
    },
    // 树过滤
    _searchFun(value) {
      console.log(value, '<--_searchFun')
      // 自行判断 是走后台查询，还是前端过滤
      this.$refs.treeSelect.filterFun(value)
      // 后台查询
      // this.$refs.treeSelect.treeDataUpdateFun(treeData);
    },
    harmfactorChangeRemove(data, node) {
      this.form.touchHarms = this.getHarmLabel(data).map((t) => { return t.hamName }).join(',')
    },
    clearHarm(){
      this.form.touchHarms=null
    },
    harmfactorChange(data, node) {
      this.form.touchHarms = this.getHarmLabel(node.checkedKeys).map((t) => { return t.hamName }).join(',')
    },

    companyChange(val) {
      console.log(val)
      let obj = {};
      obj = this.companyguidOptions.find((item)=>{
        return item.id === val;
      });
      console.log(obj);
      this.form.companyname=obj.orgname;

      if (val !== '' && val !== undefined) {
        this.form.solutionguid = ''
        this.getSolutionDetail(val)
      }
    },

    getHarmsList() {
      getallharmtype().then(response => {
        this.harmtList = response.data;
        this.harmtList.forEach(harm=>{
          harm.id = harm.harmType
          harm.hamName = harm.harmTypeName
        })
        this.treeParams.data = this.harmtList
      }).finally(()=>{
        this.showTree = true
      });
    },

    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let submitForm = JSON.parse(JSON.stringify(this.form))
          submitForm.dimeBaseharmList = this.getHarmLabel(this.form.dimeBaseharmList)
          checkregisterInfoByVid(this.form.checkCode).then(response => {
            if(response.data){
              this.$confirm('该体检号已存在, 是否重新登记?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.listLoading = true
                submitForm.id=response.data.id
                reRegisterInfo(submitForm).then(response => {
                  this.$message({
                    type: 'success',
                    message: '修改登记成功!'
                  });
                  this.form=Object.assign({}, defaultForm)
                  this.$refs.form.clearValidate()
                  this.$refs.form.resetFields()
                }).finally(()=>{
                  this.listLoading = false;
                });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消修改'
                });
              })
            }else{
              this.listLoading = true
              savePhysical(submitForm).then(response => {
                this.$modal.msgSuccess("登记成功");
                this.form=Object.assign({}, defaultForm)
                this.$refs.form.clearValidate()
                this.$refs.form.resetFields()
              }).finally(()=>{
                this.listLoading = false;
              });
            }
          })
        }else{
          this.$message({
            type: 'warning',
            message: '校验不通过!'
          });
        }
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.clearSelection()
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    cancel() {
      this.personDialog=false
      this.$refs.form.clearValidate()
    },

  }

}

</script>

<style scoped lang="scss">
::v-deep .el-select{
  width: 100%;
}
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-tag.el-tag--info {
  color: white;
}

.el-form-item .el-select {
  width: 100%;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 20px !important;
  }

  .el-rate {
    margin-top: 2px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: '';
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}
</style>

<style lang="scss" scoped>

div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 20px;
      border: 1px solid #e1e2e3;
    }

  }
}

div.tab-container {
}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {
}

.static-content-item {
  margin-bottom: 10px;
  min-height: 10px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}
</style>

<style scoped lang="scss">
.cropper-content {
  width: 430px;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  .cropper-box {
    flex: 1;
    width: 40%;
    .cropper {
      width: 300px;
      height: 200px;
    }
  }
  .show-preview {
    flex: 1;
    display: none;
    -webkit-flex: 1;
    // display: flex;
    // display: -webkit-flex;
    justify-content: center;
    .preview {
      display: none;
      overflow: hidden;
      border: 1px solid #67c23a;
      background: #cccccc;
    }
  }
}
.footer-btn {
  height: 30px;
  margin-top: 0px;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  .scope-btn {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    padding-right: 10px;
    width: 295px;
  }
  .upload-btn {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
  }
  .btn {
    outline: none;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    font-weight: 500;
    padding: 8px 15px;
    font-size: 12px;
    border-radius: 3px;
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
    margin-right: 10px;
  }
}
</style>
